<template>
    <van-cell title="好友申请" is-link style="font-weight: bold;font-size: 1.1rem"
              @click="router.push({name:'agreeWith'})"/>
    <!--联系人-->
    <div class="chatFrame">
        <van-list>
            <van-cell v-for="item in list" @click="router.push({name:'chatPage',query:{id:item.friend.friend_id}})">
                <template #title>
                    <div class="cell">

                        <van-image
                            height="50"
                            radius="5"
                            :src="`/api${item.friend.Friend.avatar}`"
                            width="50"
                        />


                        <div class="message">
                            <p class="custom-title">{{ item.friend.Friend.name }}</p>
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-list>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useFriendStore} from "../../../store/friend";
import {FriendListType} from "../../../type/friend";

const list = ref<FriendListType[]>()

// 实例化路由
const router = useRouter()

// 实例化 好友仓库
const friendStore = useFriendStore()
// 获取好友列表
friendStore.getFriendList()

// 订阅仓库
friendStore.$subscribe((mutation, state) => {
    list.value = state.friendList
})
</script>

<style scoped lang="less">
.chatFrame {
    .cell {
        display: flex;
        justify-content: space-between;

        .message {
            width: 100%;
            flex: 1;
            margin-left: 0.7rem;
            display: flex;
            align-items: center;
            font-size: 1.1rem;
        }
    }
}
</style>